<template>
  <el-drawer
    class="custom-dialog"
    v-model="showDetail"
    destroy-on-close
    size="70%"
    :with-header="false"
    style="padding: 0"
    @closed="handleHide"
  >
    <header class="detail-head">
      <div class="detail-head-img">
        <img :src="detail.imageUrlList && detail.imageUrlList.length ? detail.imageUrlList[0] : ''" />
      </div>
      <div class="detail-info">
        <div class="detail-info-name">{{ detail.productName }}</div>
        <div class="detail-info-time">提交时间：{{ detail.createTime }}</div>
      </div>
      <img class="detail-status" src="@/assets/product/detail-launch.png" v-if="detail.productStatus === 3" />
      <img class="detail-status" src="@/assets/product/detail-take-down.png" v-if="detail.productStatus === 4" />
      <img class="detail-status" src="@/assets/product/detail-not-listed.png" v-if="detail.productStatus === 2" />
      <div class="detail-close" @click="handleHide">
        <base-icon name="iconfont ic-guanbi" :size="14" :color="'var(--ct2)'" />
      </div>
    </header>
    <div class="detail-content" v-loading="detaiLoading">
      <el-anchor
        :container="'.detail-scrollbar'"
        class="anchor-right"
        direction="vertical"
        type="default"
        :offset="1000"
        @click="handleClick"
      >
        <el-anchor-link href="#part1" title="商品信息" />
        <el-anchor-link href="#part2" title="租赁设置" />
        <el-anchor-link href="#part3" title="方案设置" />
        <el-anchor-link href="#part4" title="物流设置" />
      </el-anchor>
      <el-scrollbar
        height="100%"
        ref="productContainerRef"
        style="width: calc(100% - 100px)"
        wrap-class="detail-scrollbar"
      >
        <base-card class="style-2" id="part1">
          <template #header>商品信息</template>
          <el-row>
            <el-col :span="8">
              <div class="info-desc">
                <span class="info-desc-title">商品编号：</span>
                <span class="info-desc-text">{{ detail.id }}</span>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="info-desc">
                <span class="info-desc-title">商品类型：</span>
                <span class="info-desc-text">
                  {{ detail.productTypeDesc }}
                  <el-tag type="primary" style="margin-left: 5px" v-if="detail.newOldDegreeDesc">{{
                    detail.newOldDegreeDesc
                  }}</el-tag>
                </span>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="info-desc">
                <span class="info-desc-title">租售类型：</span>
                <span class="info-desc-text">{{ detail.rentSaleTypeDesc }}</span>
              </div>
            </el-col>
            <el-divider border-style="dashed" style="margin: 20px 0" />
          </el-row>
          <el-row>
            <el-col :span="24">
              <div class="info-desc">
                <span class="info-desc-title">商品标签：</span>
                <el-tag
                  type="primary"
                  style="margin-right: 8px"
                  v-for="(item, index) in detail.labelList"
                  :key="index"
                  >{{ item }}</el-tag
                >
              </div>
            </el-col>
            <el-divider border-style="dashed" style="margin: 20px 0" />
          </el-row>
          <el-row>
            <el-col :span="24">
              <div class="info-desc">
                <span class="info-desc-title">商品类目：</span>
                <span class="info-desc-text">{{
                  `${detail.firstCategoryName}/${detail.secondCategoryName}/${detail.brandName}/${detail.modelName}`
                }}</span>
              </div>
            </el-col>
            <el-divider border-style="dashed" style="margin: 20px 0" />
          </el-row>
          <el-row>
            <el-col :span="24">
              <div class="info-desc">
                <span class="info-desc-title">商品图片：</span>
                <el-space :size="16" wrap>
                  <div class="info-img" v-for="(item, index) in detail.imageUrlList" :key="index">
                    <el-image
                      style="width: 100px; height: 100px"
                      :src="item"
                      :initial-index="index"
                      :zoom-rate="1.2"
                      :max-scale="7"
                      :min-scale="0.2"
                      :preview-src-list="detail.imageUrlList || []"
                      show-progress
                      :preview-teleported="true"
                      fit="cover"
                    />
                  </div>
                </el-space>
              </div>
            </el-col>
            <el-divider border-style="dashed" style="margin: 20px 0" />
          </el-row>
          <el-row>
            <el-col :span="24">
              <div class="info-desc">
                <span class="info-desc-title">商品视频：</span>
                <el-space :size="16">
                  <!-- <div class="info-img" @click="priviewVisble = true"> -->
                  <!-- <BasePreview v-model:visible="visible" v-model:index="currentIndex" :file-list="fileList"  /> -->
                  <BaseUpload
                    v-if="videoList"
                    list-type="picture-card"
                    action="/api/upload"
                    :limit="1"
                    v-model:file-list="videoList"
                    mode="view"
                  >
                    <el-button type="primary">选择文件</el-button>
                  </BaseUpload>
                  <!-- </div> -->
                </el-space>
              </div>
            </el-col>
            <el-divider border-style="dashed" style="margin: 20px 0" />
          </el-row>
          <el-row>
            <el-col :span="24">
              <div class="info-desc info-desc-flex">
                <span class="info-desc-title">商品详情：</span>
                <div :class="{ 'rich-text': true, 'rich-text-hidden': expandAll }">
                  <div class="rich-text-content" v-html="detail.productDetail || ''"></div>
                  <div class="rich-text-expand" v-if="expandAll">
                    <div class="rich-text-expand-btn" @click="expandText">
                      <span>查看全部</span>
                      <base-icon name="iconfont ic-xiajiantou1" :size="16" />
                    </div>
                  </div>
                </div>
              </div>
            </el-col>
            <el-divider border-style="dashed" style="margin: 20px 0" />
          </el-row>
          <el-row>
            <el-col :span="24">
              <div class="info-desc info-desc-flex">
                <span class="info-desc-title">商品参数：</span>
                <div class="long-text">
                  <el-descriptions :column="2" :border="true">
                    <el-descriptions-item
                      v-for="(item, index) in detail.productParameterList"
                      :key="index"
                      :label="item.parameterName"
                      >{{ item.parameterValue }}</el-descriptions-item
                    >
                  </el-descriptions>
                </div>
              </div>
            </el-col>
            <el-divider border-style="dashed" style="margin: 20px 0" />
          </el-row>
          <el-row>
            <el-col :span="24">
              <div class="info-desc info-desc-flex">
                <span class="info-desc-title">商品配件：</span>
                <div class="long-text">
                  <el-table
                    :data="detail.productComponentRelateList || []"
                    :header-cell-style="{ 'background-color': 'var(--fl1)' }"
                  >
                    <el-table-column
                      prop="componentType"
                      label="配件类型"
                      width="auto"
                      align="center"
                      min-width="25%"
                    />
                    <el-table-column
                      prop="componentName"
                      label="配件名称"
                      width="auto"
                      align="center"
                      min-width="25%"
                    />
                    <el-table-column label="配件数量" prop="quantity" width="auto" align="center" min-width="25%" />
                    <el-table-column label="配件价值(元)" prop="amount" width="auto" align="center" min-width="25%" />
                    <template #empty>
                      <base-empty description="暂无数据" />
                    </template>
                  </el-table>
                </div>
              </div>
            </el-col>
            <el-divider border-style="dashed" style="margin: 20px 0" />
          </el-row>
          <el-row>
            <el-col :span="24">
              <div class="info-desc info-desc-flex">
                <span class="info-desc-title">增值服务：</span>
                <div class="long-text">
                  <el-table
                    :data="detail.productAdditionalServiceRelateList || []"
                    :header-cell-style="{ 'background-color': 'var(--fl1)' }"
                  >
                    <el-table-column prop="name" label="增值服务名称" width="auto" align="center" min-width="17%" />
                    <el-table-column prop="type" label="服务类型" width="auto" align="center" min-width="17%" />
                    <el-table-column label="是否强制购买" width="auto" align="center" min-width="17%">
                      <template #default="scope">
                        {{ scope.row.forceFlag === 1 ? "强制购买" : "不强制购买" }}
                      </template>
                    </el-table-column>
                    <el-table-column
                      prop="content"
                      label="服务内容"
                      width="auto"
                      align="center"
                      min-width="30%"
                      :tooltip-formatter="({ row }) => row.content"
                    />
                    <template #empty>
                      <base-empty description="暂无数据" />
                    </template>
                  </el-table>
                </div>
              </div>
            </el-col>
            <el-divider border-style="dashed" style="margin: 20px 0" />
          </el-row>
        </base-card>
        <!-- 租赁设置 -->
        <base-card class="style-2" id="part2">
          <template #header>租赁设置</template>
          <el-row>
            <el-col :span="24">
              <div class="info-desc">
                <span class="info-desc-title">租赁对象：</span>
                <span class="info-desc-text">{{ detail.rentObjectDesc }}</span>
              </div>
            </el-col>
            <el-divider border-style="dashed" style="margin: 20px 0" />
          </el-row>
          <el-row>
            <el-col :span="12">
              <div class="info-desc">
                <span class="info-desc-title">C端渠道：</span>
                <el-space :size="16">
                  <div class="info-desc-text">
                    {{
                      detail.channelType == "1"
                        ? "全部渠道"
                        : detail.channelType == "2"
                          ? "部分渠道"
                          : detail.channelType == "3"
                            ? ".芝麻租赁"
                            : ""
                    }}
                  </div>
                  <div class="info-channel">
                    <!-- <div class="info-channel-item">{{ detail.channelTypeDesc }}</div> -->
                  </div>
                </el-space>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="info-desc">
                <span class="info-desc-title">渠道方案：</span>
                <span class="info-desc-text">{{
                  detail.rentPlan == "1" ? "统一方案" : detail.rentPlan == "2" ? "指定方案" : ""
                }}</span>
              </div>
            </el-col>
            <el-divider border-style="dashed" style="margin: 20px 0" />
          </el-row>
        </base-card>
        <!-- 方案设置 -->
        <base-card class="style-2" id="part3" v-if="detail?.productRentPlanList && detail?.productRentPlanList.length">
          <template #header>方案设置</template>
          <el-row>
            <el-col :span="24">
              <el-tabs v-model="currentPlan" v-if="detail?.productRentPlanList.length > 1" @tab-click="changePlan">
                <el-tab-pane
                  v-for="(item, index) in detail.productRentPlanList"
                  :key="index"
                  :label="item.planName"
                  :name="index"
                ></el-tab-pane>
              </el-tabs>
            </el-col>

            <el-col :span="24">
              <div class="info-desc">
                <span class="info-desc-title">账期类型：</span>
                <span class="info-desc-text">{{ detail.productRentPlanList[currentPlan].periodTypeDesc }}</span>
              </div>
            </el-col>
            <el-divider border-style="dashed" style="margin: 20px 0" />
          </el-row>
          <el-row>
            <el-col :span="24">
              <div class="info-desc">
                <span class="info-desc-title">租赁模式：</span>
                <el-space :size="24">
                  <span
                    class="info-desc-text"
                    v-for="(typeItem, idx) in detail.productRentPlanList[currentPlan].rentModelTypeList"
                    :key="idx"
                    >{{ typeItem === 1 ? "到期归还/续租/购买" : "到期购买" }}</span
                  >
                </el-space>
              </div>
            </el-col>
            <el-divider border-style="dashed" style="margin: 20px 0" />
          </el-row>
          <el-row>
            <el-col :span="24">
              <div class="info-desc info-desc-flex">
                <span class="info-desc-title">租赁价格：</span>
                <div class="long-text">
                  <el-table
                    :data="detail.productRentPlanList[currentPlan].productSkuList || []"
                    :header-cell-style="{ 'background-color': 'var(--fl1)' }"
                  >
                    <el-table-column prop="name" label="租赁模式" width="auto" align="center" min-width="150">
                      <template #default="scope">
                        {{ scope.row?.productRentModelTypeList[0].rentModelTypeStr }}
                      </template>
                    </el-table-column>
                    <el-table-column label="商品规格" min-width="200" width="auto" :align="'center'">
                      <template #default="scope">
                        <el-image
                          style="width: 100px; height: 100px"
                          :src="scope.row.imageUrl"
                          :zoom-rate="1.2"
                          :max-scale="7"
                          :min-scale="0.2"
                          :preview-src-list="[scope.row.imageUrl]"
                          show-progress
                          :preview-teleported="true"
                          fit="cover"
                        />
                      </template>
                    </el-table-column>
                    <el-table-column label="商品信息" min-width="200" width="auto" :align="'center'">
                      <template #default="scope">
                        <el-space direction="vertical" alignment="start" :size="8">
                          <div class="info-desc">
                            <span class="info-desc-title">官方售价：</span>
                            <span class="info-desc-text">{{ scope.row.officialPrice }}</span>
                          </div>
                          <div class="info-desc">
                            <span class="info-desc-title">商家采购价：</span>
                            <span class="info-desc-text">{{ scope.row.purchasePrice }}</span>
                          </div>
                          <div class="info-desc">
                            <span class="info-desc-title">库存：</span>
                            <span class="info-desc-text">{{ scope.row.quantity }}</span>
                          </div>
                        </el-space>
                      </template>
                    </el-table-column>
                    <el-table-column label="租期" min-width="200" width="auto" :align="'center'">
                      <template #default="scope">{{
                        `${scope.row?.productRentModelTypeList[0].minDays}~${scope.row?.productRentModelTypeList[0].maxDays}天`
                      }}</template>
                    </el-table-column>
                    <!-- 租期天数列 -->
                    <el-table-column
                      v-for="(dayItem, index) in dayConfigList"
                      :key="index"
                      :label="dayItem.dictLabel"
                      min-width="200"
                      width="auto"
                      :align="'center'"
                    >
                      <template #default="scope">
                        <el-space
                          direction="vertical"
                          alignment="start"
                          :size="8"
                          v-if="
                            dayPriceData(scope.row?.productRentModelTypeList[0].productSkuPriceList, dayItem.dictValue)
                          "
                        >
                          <div class="info-desc">
                            <span class="info-desc-title">日均价：</span>
                            <span class="info-desc-text">{{
                              dayPriceData(
                                scope.row?.productRentModelTypeList[0].productSkuPriceList,
                                dayItem.dictValue
                              ).dayPrice
                            }}</span>
                          </div>
                          <div class="info-desc">
                            <span class="info-desc-title">划线价：</span>
                            <span class="info-desc-text">{{
                              dayPriceData(
                                scope.row?.productRentModelTypeList[0].productSkuPriceList,
                                dayItem.dictValue
                              ).underlinePrice
                            }}</span>
                          </div>
                          <div class="info-desc">
                            <span class="info-desc-title">销售价：</span>
                            <span class="info-desc-text">{{
                              dayPriceData(
                                scope.row?.productRentModelTypeList[0].productSkuPriceList,
                                dayItem.dictValue
                              ).salePrice
                            }}</span>
                          </div>
                        </el-space>
                        <div v-else></div>
                      </template>
                    </el-table-column>

                    <template #empty>
                      <base-empty description="暂无数据" />
                    </template>
                  </el-table>
                </div>
              </div>
            </el-col>
            <el-divider border-style="dashed" style="margin: 20px 0" />
          </el-row>
        </base-card>
        <!-- 物流设置 -->
        <base-card class="style-2" id="part4" v-if="detail?.productRentPlanList && detail?.productRentPlanList.length">
          <template #header>物流设置</template>
          <el-row>
            <el-col :span="8">
              <div class="info-desc">
                <span class="info-desc-title">发货邮费：</span>
                <span class="info-desc-text">{{
                  detail.productRentPlanList[currentPlan].deliveryPostageDesc || ""
                }}</span>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="info-desc">
                <span class="info-desc-title">发货地区：</span>
                <span class="info-desc-text">{{
                  `${detail.productRentPlanList[currentPlan].provinceName}${detail.productRentPlanList[currentPlan].cityName}${detail.productRentPlanList[currentPlan].districtName}`
                }}</span>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="info-desc">
                <span class="info-desc-title">归还邮费：</span>
                <span class="info-desc-text">{{ detail.productRentPlanList[currentPlan].returnPostageDesc }}</span>
              </div>
            </el-col>
            <el-divider border-style="dashed" style="margin: 20px 0" />
          </el-row>
          <el-row>
            <el-col :span="24">
              <div class="info-desc info-desc-flex">
                <span class="info-desc-title">归还地址：</span>
                <div class="long-text">
                  <el-table
                    :data="detail.productRentPlanList[currentPlan].productReturnAddressList || []"
                    show-overflow-tooltip
                    :header-cell-style="{ 'background-color': 'var(--fl1)' }"
                    row-key="id"
                  >
                    <el-table-column prop="name" label="收货人" width="auto" align="center" min-width="25%" />
                    <el-table-column label="收货地址" width="auto" align="center" min-width="25%">
                      <template #default="scope">
                        {{ scope.row.address }}
                      </template>
                    </el-table-column>
                    <el-table-column prop="telephone" label="手机号码" width="auto" align="center" min-width="25%" />
                    <el-table-column prop="createTime" label="添加时间" width="auto" align="center" min-width="25%" />
                    <template #empty>
                      <base-empty description="暂无数据" />
                    </template>
                  </el-table>
                </div>
              </div>
            </el-col>
            <el-divider border-style="dashed" style="margin: 20px 0" />
          </el-row>
        </base-card>
      </el-scrollbar>
    </div>
    <BasePreview v-model:visible="priviewVisble" :file-list="[detail.videoUrl]" @close="priviewVisble = false" />
  </el-drawer>
</template>

<script setup>
  const props = defineProps({
    visble: { type: Boolean, default: false },
    currentData: {
      type: Object,
      default: () => {
        return {};
      },
    },
  });
  // 监听显隐
  watch(
    () => props.visble,
    v => {
      showDetail.value = v;
      if (props.visble) {
        init();
      }
    }
  );
  const emit = defineEmits(["hide"]);
  // 显示隐藏
  const showDetail = ref(false);
  // 右侧商品内容Ref
  const productContainerRef = ref();
  // 查看全部显示
  const expandAll = ref(true);
  // 详情数据
  const detail = ref({});
  // 视频预览
  const priviewVisble = ref(false);
  // 当前方案
  const currentPlan = ref(0);
  // 天数
  const dayConfigList = ref([]);
  // 详情加载
  const detaiLoading = ref(false);
  // 视频预览
  const videoList = ref([]);

  // 天数价格数据处理
  const dayPriceData = computed(() => {
    return (list, day) => {
      if (list) {
        const data = list.find(item => {
          return item.days == day;
        });

        return data ? data : "";
      } else {
        return "";
      }
    };
  });
  // 初始化
  const init = () => {
    loadSkuDayConfig();
    loadDetail();
  };
  // 获取天数配置数据
  const loadSkuDayConfig = () => {
    Api.product.getDictionaryData({ dictCode: "qingyun.product.lease.term" }).then(res => {
      console.warn(res);
      dayConfigList.value = res.data;
    });
  };
  // 获取商品详情
  const loadDetail = () => {
    detaiLoading.value = true;
    Api.product
      .getProductDetail({ id: props.currentData.id })
      .then(res => {
        console.warn(res);
        detail.value = res.data;
        if (res.data.videoUrl) {
          videoList.value = [{ url: res.data.videoUrl, status: "213" }];
        }
      })
      .finally(() => {
        detaiLoading.value = false;
      });
  };
  // 关闭
  const handleHide = () => {
    emit("hide");
  };
  const handleClick = e => {
    e.preventDefault();
  };
  // 展开
  const expandText = () => {
    expandAll.value = false;

    // if(expandAll.value){
    //   expandAll.value=false
    // }else{
    //   expandAll.value=true
    // }
  };
  // 折叠
  const changePlan = () => {};
</script>

<style lang="scss" scoped>
  .detail-head {
    padding: 24px;
    height: 128px;
    background: linear-gradient(360deg, rgba(242, 240, 254, 0) 0%, #fff 59.62%, var(--bd9) 100%);
    display: flex;
    position: relative;
    .detail-head-img {
      width: 80px;
      height: 80px;
      border: 1px solid var(--fl1);
      border-radius: 8px;
      background-color: var(--fl7);
      margin-right: 16px;
      > img {
        width: 70px;
        height: 70px;
      }
    }
    .detail-info {
      display: flex;
      flex-wrap: wrap;
      align-content: center;
      height: 80px;
      .detail-info-name {
        font-size: 20px;
        color: var(--ct1);
        margin-bottom: 8px;
        width: 100%;
        font-weight: bold;
      }
      .detail-info-time {
        font-size: 14px;
        color: var(--ct13);
      }
    }
    .detail-status {
      width: 72px;
      height: 72px;
      position: absolute;
      top: 28px;
      right: 88px;
    }
    .detail-close {
      position: absolute;
      top: 24px;
      right: 24px;
      width: 24px;
      height: 24px;
      border-radius: 50%;
      background-color: var(--fl7);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
    }
  }
  .detail-content {
    height: calc(100% - 128px);
    padding: 0 24px;
    display: flex;
    justify-content: space-between;
    .detail-scrollbar {
    }
    .info-desc {
      font-size: 14px;
      .info-desc-title {
        color: var(--ct3);
      }
      .info-desc-text {
        color: var(--ct1);
      }
      .info-img {
        width: 120px;
        height: 120px;
        border: 1px solid var(--cb1);
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .rich-text {
        width: calc(100% - 70px);
        // background-color: red;
        position: relative;
        .rich-text-content {
          width: 100%;
          // height: 800px;
        }
        .rich-text-expand {
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100%;
          display: flex;
          justify-content: center;
          background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, var(--fl7) 100%);

          .rich-text-expand-btn {
            width: 100px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: var(--fl7);
            border-radius: 100px;
            cursor: pointer;
            > span {
              margin-right: 4px;
            }
          }
        }
      }
      .rich-text-hidden {
        height: 720px;
        overflow: hidden;
      }
      .long-text {
        width: calc(100% - 70px);
      }
      .info-channel {
        display: flex;
        flex-wrap: wrap;
        .info-channel-item {
          padding: 0 12px;
          color: var(--ct2);
          font-size: 14px;
          margin-right: 8px;
        }
      }
    }
    .info-desc-flex {
      display: flex;
    }
  }
</style>
<style lang="scss">
  .el-overlay {
    .custom-dialog {
      .el-drawer__body {
        padding: 0;
      }
    }
  }
</style>
